<template>
	<view class="page">
		<view class="title">{{data.Title}}</view>
		<view class="content" v-html="data.IntroContent"></view>
		<view class="control-box" v-if="data.Title && data.IntroContent">
			<view class="control-bg1" v-if="isPlay"></view>
			<view class="control-bg2" v-if="isPlay"></view>
			<view class="control-bg3" v-if="isPlay"></view>
			<image src="../../../../static/theme/default/home/play.png" mode="" v-if="!isPlay" @click="play"></image>
			<image src="../../../../static/theme/default/home/pause.png" mode="" v-else @click="pause"></image>
		</view>
	</view>
</template>

<script>
	import _data from '@/common/_data.js'
	
	export default {
		data() {
			return {
				data: {},
				isPlay: false,
				innerAudioContext: null
			}
		},
		onLoad(option) {
			this.data = JSON.parse(option.data)
			let url = this.data.VoicePath.replace('homepage',_data.data('static_img') + '/homepage')
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.autoplay = true;
			this.innerAudioContext.src = url;
			this.innerAudioContext.onPlay(() => {
				this.isPlay = true;
			});
			this.innerAudioContext.onEnded(() => {
				this.isPlay = false;
			});
		},
		onUnload() {
			this.innerAudioContext.destroy()
		},
		methods: {
			play() {
				this.innerAudioContext.play()
			},
			pause() {
				this.innerAudioContext.pause()
				this.isPlay = false;
			},
		}
	}
</script>

<style>
	.page {
		min-height: 100vh;
		background-color: #fff;
		position: relative;
	}
	
	.title {
		font-size: 35rpx;
		text-align: center;
		line-height: 60rpx;
		padding: 20rpx 60rpx;
		box-sizing: border-box;
		font-weight: bold;
		text-shadow: 1rpx 1rpx 1rpx rgba(0,0,0,.1);
	}
	
	.content {
		padding: 0 20rpx;
		font-size: 30rpx;
		color: #606266;
		text-shadow: 1rpx 1rpx 1rpx rgba(0,0,0,.1);
	}
	
	.control-box {
		width: 100rpx;
		height: 100rpx;
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		transform: translateX(-50%);
		border: 1rpx solid rgba(92,92,102,.5);
		border-radius: 50%;
		text-align: center;
		line-height: 130rpx;
	}
	
	.control-box > image {
		width: 50%;
		height: 50%;
	}
	
	.control-bg1,.control-bg2,.control-bg3 {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		animation-duration: 3s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		animation-name: circleChange;
		border: 1rpx solid	rgba(92,92,102,.5);
		top: 0;
		left: 0;
	}
	
	.control-bg1 {
	    animation-delay: 1s;
	}
	.control-bg2 {
	    animation-delay: 3s;
	}
	.control-bg3 {
	    animation-delay: 5s;
	}
	
	@keyframes circleChange{
	    0%{transform: scale(1.3);opacity: 0.95;}
	    25%{transform: scale(1.6);opacity: 0.75;}
	    50%{transform: scale(1.9);opacity: 0.5;}
	    75%{transform: scale(2.2);opacity: 0.25;}
	    100%{transform: scale(2.5);opacity: 0.05;}
	}
</style>
